<template>
  <div id="logupm">
    <div>
      <Steps :current="current">
        <Step title="填写基本信息" icon="ios-person"></Step>
        <Step title="上传头像" icon="ios-camera"> </Step>
        <Step title="等待审核" icon="md-checkmark">等待审核</Step>
      </Steps>
    </div>
    <div id="contents">
      <div v-if="current == 0">
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80"
        >
          <FormItem label="姓名" prop="name">
            <Input
              v-model="formValidate.name"
              placeholder="Enter your name"
            ></Input>
          </FormItem>
          <FormItem label="身份证号" prop="idcard">
            <Input
              v-model="formValidate.idcard"
              placeholder="Enter your idcard"
            ></Input>
          </FormItem>
          <FormItem label="手机号" prop="phone">
            <Input
              v-model="formValidate.phone"
              placeholder="Enter your phone"
            ></Input>
          </FormItem>

          <FormItem label="工作经历" prop="workexp">
            <Input
              v-model="formValidate.workexp"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
          <FormItem label="学习经历" prop="study">
            <Input
              v-model="formValidate.study"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
          <FormItem label="职位" prop="role">
            <Select v-model="formValidate.role" style="width: 200px">
              <Option
                v-for="item in roles"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>

          <FormItem label="密码" prop="password">
            <Input
              type="password"
              v-model="formValidate.password"
              placeholder="Enter your password"
            ></Input>
          </FormItem>
          <FormItem label="确认密码" prop="confirm">
            <Input
              type="password"
              v-model="formValidate.confirm"
              placeholder="Enter your password"
            ></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')"
              >提交</Button
            >
            <Button
              @click="handleReset('formValidate')"
              style="margin-left: 8px"
              >重置</Button
            >
          </FormItem>
        </Form>
      </div>
      <div v-if="current == 1">
        <div>
          <Upload :before-upload="handleUpload" action="/api/manage">
            <Button icon="ios-cloud-upload-outline"
              >Select the file to upload</Button
            >
          </Upload>
          <div v-if="file !== null">
            Upload file: {{ file.name }}
            <Button type="text" @click="upload" :loading="loadingStatus">{{
              loadingStatus ? "Uploading" : "Click to upload"
            }}</Button>
          </div>
        </div>
      </div>
      <div v-if="current == 2">
        <h1>请等待审核</h1>
        <!-- <Button type="primary" @click="submit" v-else>提交</Button> -->
      </div>
      <!-- <Button type="primary" @click="next">Next step</Button> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your password again"));
      } else if (value !== this.formValidate.password) {
        callback(new Error("The two input passwords do not match!"));
      } else {
        callback();
      }
    };
    return {
      current: 0,
      file: null,
      loadingStatus: false,
      roles: [
        { label: "销售", value: "销售" },
        { label: "仓库管理员", value: "仓库管理员" },
        { label: "市场分析调查员", value: "市场分析调查员" },
        { label: "人事", value: "人事" },
      ],
      formValidate: {
        name: "",
        idcard: "",
        phone: "",
        workexp: "",
        study: "",
        password: "",
        confirm: "",
        role: "",
        times: 0,
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "输入名字",
            trigger: "blur",
          },
        ],
        idcard: [
          {
            required: true,
            message: "输入身份证号",
            trigger: "blur",
          },
          {
            type: "string",
            min: 18,
            max: 18,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change",
          },
          {
            type: "string",
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        workexp: [
          {
            required: true,
            message: "请输入工作经历(没有填'无')",
            trigger: "blur",
          },
          {
            type: "string",
            min: 2,
            message: "Introduce no less than 2 words",
            trigger: "blur",
          },
        ],
        study: [
          {
            required: true,
            message: "请输入学习经历(没有填'无')",
            trigger: "blur",
          },
          {
            type: "string",
            min: 2,
            message: "Introduce no less than 2 words",
            trigger: "blur",
          },
        ],
        role: [
          {
            required: true,
            message: "请选择申请的职位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 8,
            message: "不能小于8位",
            trigger: "blur",
          },
        ],
        confirm: [{ validator: validatePassCheck, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success("Success!");
          var to_tornado = JSON.stringify(this.formValidate);
          var dinfo = JSON.parse(to_tornado);
          this.$delete(dinfo, "confirm");
          // var today = new Date();
          // var y = today.getFullYear();
          // var m = today.getMonth() + 1;
          // var d = today.getDate();
          // m = m < 10 ? "0" + m : m;
          // d = d < 10 ? "0" + d : d;
          // this.formValidate.startime = y + "-" + m + "-" + d;
          // var xx = Math.floor(Math.random() * 100);
          // this.formValidate.sid =
          //   y.toString() + m.toString() + d.toString() + "0" + xx.toString();
          this.axios
            .post("/api/manage", dinfo)
            .then((r) => {
              var info = r.data;
              this.$Message.info(info);
            })
            .catch((e) => {
              this.$Message.error("e" + e);
            });
          this.next();
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    next() {
      if (this.current == 2) {
        this.$Message.info("请等待审核");
        this.current = 2;
      } else {
        this.current += 1;
      }
    },
    handleUpload(file) {
      this.file = file;
      return false;
    },
    upload() {
      this.loadingStatus = true;

      setTimeout(() => {
        // var to_tornado = {
        //   info: dinfo,
        //   imgfile: JSON.stringify(this.file),
        // };
        this.loadingStatus = false;
        this.axios
          .put("/api/manage", this.file)
          .then((r) => {
            this.$Message.success(r.data);
          })
          .catch((e) => {
            this.$Message.info("E" + e);
          });
      }, 1000);

      setTimeout(() => {
        this.file = null;
        this.next();
      }, 1500);
    },
  },
};
</script>
<style scoped>
#logupm {
  width: 1900px;
  height: 800px;
  text-align: center;
  position: fixed;

}
#contents {
  width: 500px;
  height: 800px;
  margin-top: 100px;
  margin-left: 700px;
 
}
</style>
